<template>
    <!-- 分销商详情 -->
    <div class="view">
        <div class="head">
            <span>分销商列表>分销商详情</span>
        </div>
        <!-- 基本信息 -->
        <div class="head1">
            <div class="head1-x">基本信息</div>
            <div class="head1-y">
                <div class="head1-y-x head1-y-xx">
                    <div class="headSculpture">
                        <img :src="tableData1.tableData.userMessage.image" alt="">
                    </div>
                    <span>id:{{tableData1.tableData.userMessage.id}}</span>
                </div>
                <div class="head1-y-x">
                    <span>昵称:{{tableData1.tableData.userMessage.username}}</span>
                    <span>姓名:{{tableData1.tableData.userMessage.name}}</span>
                    <span>手机号:{{tableData1.tableData.userMessage.phone}}</span>
                </div>
                <div class="head1-y-x">
                    <span>邀请方:{{tableData1.tableData.parentName}}</span>
                    <span>申请时间:2021-05-01</span>
                    <span>加入时间:2021-05-03</span>
                </div>
                <div class="head1-y-x">
                    <span>分销商等级:{{tableData1.tableData.lever}}</span>
                    <span>状态：</span>
                    <br>
                </div>
            </div>
        </div>
        <!-- 下线人数 -->
        <div class="head1">
            <div class="head1-x">下线人数</div>
            <div class="xia">
                <div class="xia-a">
                    <div>一级下线数:
                        <span @click="xia">{{counst1}}</span>
                    </div>
                    <!-- <div>分销商</div>
                    <div>普通下线</div> -->
                </div>
                <div class="xia-a xia-b">
                    <div>二级下线数:
                        <span @click="xia">{{counst2}}</span>
                    </div>
                    <!-- <div>分销商</div>
                    <div>普通下线</div> -->
                </div>
                <div class="xia-a">
                    <div>三级下线数:
                        <span @click="xia">{{counst3}}</span>
                    </div>
                    <!-- <div>分销商</div>
                    <div>普通下线</div> -->
                </div> 
            </div>
        </div>
        <!-- 业绩统计 -->
        <div class="head1">
            <div class="head1-x">业绩统计</div>
            <div class="performance">
                <div class="performance-a">
                    <span class="performance-a-x">{{tableData1.tableData.costCount}}</span>
                    <span>累计销售金额(元)</span>
                </div>
                <div class="performance-a">
                    <span class="performance-a-x">{{tableData1.tableData.costCount}}</span>
                    <span>累计佣金(元)</span>
                </div>
                <div class="performance-a">
                    <span class="performance-a-x">{{tableData1.tableData.brokerageCount}}</span>
                    <span>累计邀请分销商</span>
                </div>
            </div>
        </div>
        <!-- 佣金统计 -->
        <div class="head1">
            <div class="head1-x">佣金统计</div>
            <div class="performance">
                <div class="performance-a">
                    <span class="performance-a-x">211212</span>
                    <span>累计佣金(元)</span>
                </div>
                <div class="performance-a">
                    <span class="performance-a-x">105</span>
                    <span>待结算佣金(元)</span>
                </div>
                <div class="performance-a">
                    <span class="performance-a-x">88</span>
                    <span>待提现佣金</span>
                </div>
                <div class="performance-a">
                    <span class="performance-a-x">88</span>
                    <span>已提现佣金</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onBeforeMount, reactive, ref, toRefs } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import nuser from '@/service/user'
const router=useRouter()
const route=useRoute()
let count=reactive({
    counst1:'',
    counst2:'',
    counst3:'',
})
let {counst1,counst2,counst3} =toRefs(count)
const tableData1=reactive({tableData:{
}})

//传给下个页面的数据
const cxia=ref({
    count:'',
    imgurl:'',
    name:''
})
let zi=ref()
onBeforeMount(()=>{
    // console.log(JSON.parse(route.query.view));
    tableData1.tableData=JSON.parse(route.query.view)
    // 获取下线
    nuser.idxia(tableData1.tableData.userId).then((res:any)=>{
        if(res.data.data==null){
      console.log('获取下线数据失败了');
        }
        // 更新分销商下线数
        count.counst1=res.data.data.oneCount
        count.counst2=res.data.data.twoCount
        count.counst3=res.data.data.threeCount
        cxia.value.count=count.counst1=res.data.data.oneCount
    })
    cxia.value.imgurl=tableData1.tableData.userMessage.image
    cxia.value.name=tableData1.tableData.userMessage.name
})
const xia=(()=>{
    console.log(tableData1.tableData);
    
    router.push({
        path:'/OffineList',
        query:{
            id:tableData1.tableData.userId,
            count:cxia.value.count,
            imgurl:cxia.value.imgurl,
            name:cxia.value.name
        }
    })
})
</script>

<style scoped lang="less">
.view{
    width: 100%;
    height: 100%;
    background-color: #f2f2f2;
}
.head{
    width: 100%;
    height: 40px;
    background-color: white;
    span{
        margin-left: 10px;
        line-height: 40px;
        font-size: 14px;
    }
}
// 基本信息
.head1{
    margin-top: 20px;
    background-color: rgb(255, 255, 255);
    width: 100%;
    height:160px;
    box-sizing: border-box;
    padding: 10px;
}
.head1-x{
    border-left: 5px solid #ed742f;
    padding-left: 10px;

}
.head1-y{
    width: 100%;
    display: flex;
    align-items: center;
    height:100px;
}
.head1-y-x{
    display: flex;
    flex-direction: column;
    width: 300px;
    
}
/deep/.head1-y-xx{
    align-items: center;
    width: 200px;
    margin-right: 50px;

}
.headSculpture{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    margin-bottom: 5px;
    img{
        width: 35px;
        height: 35px;
        border-radius: 50%;
    }
}
// 下线二级
.xia{
    display: flex;
    height: 100%;
    width: 100%;
}
.xia-a{
    width: 30%;
    height: 80%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    span{
        color: #ed742f;
        cursor: pointer
    }
}
/deep/.xia-b{
    border-left: 1px solid black;
    border-right: 1px solid black
}
.xia-a>div{
    width: 150px;
    margin-top: 10px;
}
// 业绩统计
.performance{
    width: 100%;
    height: 80%;
    display: flex;
    align-items: center;
}
.performance-a{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 250px;
}
.performance-a-x{
    font-size: 22px;
    margin-bottom: 10px;
}
// 佣金统计
</style>